import React, { Component } from 'react'
import { connect } from 'react-redux'
import Header from '../../components/Headers/Headers'
import logo from '../../assets/images/logo/pic_logo_orange.png'

import './register.css'
import { actions, getUser } from '../../store/modules/register';
import { bindActionCreators } from 'redux';



class Register extends Component {
    render() {
        console.log(this.props);
        let { userActions: { change_register_user,reqRegister } } = this.props
        return (
            <div>
                <Header {...this.props} title={"注册"} back={true}></Header>
                <div className="register_img">
                    <img src={logo} alt="" />
                </div>
                <div className="register_form">
                    <div><span>手机号:</span><input type="text" onChange={(e) => change_register_user(e.target.value,"phone")} placeholder="请输入手机号" /></div>
                    <div><span>昵称:</span><input type="text" onChange={(e) => change_register_user(e.target.value,"nickname")} placeholder="请输入昵称" /></div>
                    <div><span>密码:</span><input type="text" onChange={(e) => change_register_user(e.target.value,"password")} placeholder="请输入密码" /></div>
                </div>
                <div className="register_button">
                    <button className="register_btn" onClick={()=>reqRegister(this.props.history)}>注册</button>
                </div>
            </div>
        )
    }
}

let mapStateToProps = (state) => ({
    user: getUser(state)
})
let mapDispatchToProps = (dispatch) => ({
    userActions: bindActionCreators(actions, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(Register)
